<!-- <template>
  <div>

    <el-row :gutter="10">
      <div class="firstdiv">

        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="parentdiv">
            <div class="childdiv"></div>
            <el-button type="text" @click="jumpone">
              权限管理</el-button>
          </div>
        </el-col>
      </div>

      <div class="firstdiv">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="11">
          <div class="parentdiv">
            <div class="childdiv"></div>
            <el-button type="text" @click="jumptwo">角色管理
            </el-button>
          </div>
        </el-col>
      </div>

      <div class="firstclass">
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="11">
          <div class="parentdiv">
            <div class="childdiv"></div>
            <el-button type="text" @click="jumpthree">机构管理
            </el-button>
          </div>
        </el-col>
      </div>


    </el-row>

  </div>

</template>

<script>
  export default {
    data() {},
    methods: {
      jumpone() {
        this.$router.push('/sys/user/UserList');
      },
      jumptwo() {
        this.$router.push('/sys/role/RoleList');
      },
      jumpthree() {
        this.$router.push('/sys/office/OfficeList');
      }
    }
  }
</script>

<style>
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-button {
    margin-left: 7px;
  }

  .parentdiv {
    height: 150px;
    width: 150px;
  }

  .childdiv {
    height: 100px;
    width: 100px;
    background-size: 100px;
    background-image: url('../../test/smalltest/imaage/54c1762a713753fd8473e02b2f8fdea.png');
  }

  .divfirst {
    position: absolute;
  }

  .firstclass {
    position: relative;
    float: left;
    margin-left: 150px;
  }
</style>
 -->